<template>
    <div class="agianst">
        <div class="header">
            <div class="title">
                Against Config
            </div>
        </div>
        <div class="leftPan">
            <div class="lstSolutions">
                <div class="solution"
                    v-for = "(solution,soIndex) in solutions"
                    :key="soIndex"
                >
                    <div class="info">
                        <div class="title">
                            {{solution.solutionCode}} - {{solution.solutionName}}
                        </div>
                        <div class="desc">
                            {{solution.preGropuCount}} / {{solution.preMemberCount}} ==> {{solution.groupCount}} / {{solution.memberCount}}
                        </div>
                    </div>
                    <div class="ac">
                        <el-button type="text" @click="showSolutionDlg(solution.solutionId)">修改</el-button>
                        <el-button type="text">删除</el-button>
                        <el-button type="text" @click="onPickSolution(solution)">详细</el-button>
                    </div>
                </div>
            </div>
            <div class="solutionAcs">
                <el-button type="primary" @click="showSolutionDlg(0)">
                    <i class="fa fa-plus"></i> 新建方案
                </el-button>
            </div>
        </div>
        <div class="main">
            <div class="page">
                <!-- <div ref="graphContainer" class="graphContainer"></div> -->
                <div class="panFrom">
                    <el-tree
                        ref="tree1"
                        :data="srcs"
                        node-key="nodeId"
                        default-expand-all
                        draggable
                        :props="srcProps"
                        :allow-drop="allowDrop"
                        :allow-drag="allowDrag"
                        @node-drag-start="handleDragstart"
                        @node-drag-end="handleDragend"
                        >
                        <span class="custom-tree-node" slot-scope="{ node, data }">
                                <span>{{ node.label }}</span>
                                <span v-if="data.flag && data.flag ==1">
                                    <i class="fa fa-cogs"></i> 已完成
                                </span>
                            </span>

                    </el-tree>
                </div>
                <div class="panTo">
                    <el-tree
                        ref="tree2"
                        :data="targets"
                        node-key="nodeId"
                        default-expand-all
                        :props="targetProps"
                        draggable
                        :allow-drop="allowDrop"
                        :allow-drag="allowDrag"
                        @node-drag-start="handleVirStat"
                        @node-drag-end="handleVirDragend"

                    ></el-tree>
                </div>
            </div>
        </div>
        <el-dialog
            title="solution"
            :visible.sync="solutionDlg.show"
            width="480px">
            <div class="editForm">
                <el-form label-position="right" label-width="120px" :model="solutionDlg.info">
                    <el-form-item label="code">
                        <el-input v-model="solutionDlg.info.solutionCode"></el-input>
                    </el-form-item>
                    <el-form-item label="name">
                        <el-input v-model="solutionDlg.info.solutionName"></el-input>
                    </el-form-item>
                    <el-form-item label="preGroup">
                        <el-input v-model="solutionDlg.info.preGropuCount"></el-input>
                    </el-form-item>
                    <el-form-item label="preMember">
                        <el-input v-model="solutionDlg.info.preMemberCount"></el-input>
                    </el-form-item>
                    <el-form-item label="group">
                        <el-input v-model="solutionDlg.info.groupCount"></el-input>
                    </el-form-item>
                    <el-form-item label="member">
                        <el-input v-model="solutionDlg.info.memberCount"></el-input>
                    </el-form-item>
                    <el-form-item label="description">
                        <el-input v-model="solutionDlg.info.solutionDesc"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="solutionDlg.show = false">取 消</el-button>
                <el-button type="primary" @click="saveSolution">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import mx from 'mxgraph'
import { constants } from 'zlib'
console.log(mx)

const mxgraph = mx({
  mxImageBasePath: './src/images',
  mxBasePath: './src'
})
const MxGraph = mxgraph.mxGraph
export default {
  mounted () {
    var me = this
    try {
      me.refreshSolutions()
      // me.refreshGraph();
    } catch (er) {
      console.log(er)
    }
  },

  data () {
    return {
      solutions: [],
      currentSolutionIndex: 0,
      solutionDlg: {
        show: false,
        id: 0,
        info: {}
      },
      currentSolutionId: 0,
      srcs: [],
      srcProps: {
        children: 'children',
        label: 'label',
        disabled: (data, node) => {
          console.log(data)
          var flag = data.flag > 0
          return flag
        }
      },
      targets: [],
      targetProps: {
        children: 'children',
        label: 'label'
      }

    }
  },

  methods: {
    refreshSolutions () {
      var me = this
      try {
        var key = 'against/getSolutions'
        me.sys.query(key, { }).then(res => {
          me.solutionDlg.show = false
          me.solutions = res
        })
      } catch (er) {
        console.log(er)
      }
    },
    showSolutionDlg (solutionId) {
      var me = this
      try {
        var info = {}
        if (solutionId > 0) {
          info = me.solutions.find(s => {
            return s.solutionId == solutionId
          })
        } else {
          info = {
            solutionId: 0,
            solutionCode: '',
            solutionName: '',
            preGropuCount: 1,
            preMemberCount: 2,
            groupCount: 1,
            memberCount: 2,
            solutionDesc: ''
          }
        }
        me.solutionDlg.info = info
        me.solutionDlg.show = true
      } catch (er) {
        console.log(er)
      }
    },
    saveSolution () {
      var me = this
      try {
        var key = me.solutionDlg.info.solutionId == 0 ? 'against/createSolution' : 'against/editSolution'
        me.sys.query(key, me.solutionDlg.info).then(res => {
          console.log(res)
          if (res && res.rowcount && res.rowcount > 0) {
            me.refreshSolutions()
          } else {
            me.$message.error('提交失败！')
          }
        })
      } catch (er) {
        console.log(er)
      }
    },
    onPickSolution (solution) {
      var me = this
      try {
        me.refreshItems(solution.solutionId)
      } catch (er) {
        console.log(er)
      }
    },
    refreshGraph () {
      var me = this
      try {
        var graph = new MxGraph(this.$refs.graphContainer)

        // Gets the default parent for inserting new cells. This
        // is normally the first child of the root (ie. layer 0).
        var parent = graph.getDefaultParent()

        // Adds cells to the model in a single step
        graph.getModel().beginUpdate()
        try {
          const v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30)
          const v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30)

          graph.insertEdge(parent, null, '', v1, v2)
        } finally {
          // Updates the display
          graph.getModel().endUpdate()
        }
      } catch (er) {
        console.log(er)
      }
    },
    refreshItems (solutionId) {
      var me = this
      try {
        me.currentSolutionId = solutionId
        var key = 'against/getItemSrcs'
        me.sys.query(key, { solutionId: solutionId }).then(res => {
          var srcs = []
          res.forEach(r => {
            if (0 === 0) {
              var group = srcs.find(s => {
                return s.preGroup == r.preGroup
              })
              if (group == null) {
                group = {
                  bodeType: 'srcGroup',
                  nodeId: r.preGroup,
                  preGroup: r.preGroup,
                  label: '第' + r.preGroup + '组',
                  children: []
                }
                srcs.push(group)
              }
              r.nodeId = group.preGroup + '-' + r.preRank
              r.label = '第' + r.preRank + '名'
              r.nodeType = 'src'
              group.children.push(r)
            }
          })
          me.srcs = srcs
          key = 'against/getItemTargets'
          me.sys.query(key, { solutionId: solutionId }).then(res => {
            var targets = []
            res.forEach(r => {
              var group = targets.find(t => {
                return t.groupOrder == r.groupOrder
              })
              if (group == null) {
                group = {
                  bodeType: 'targetGroup',
                  nodeId: r.groupOrder,
                  groupOrder: r.groupOrder,
                  label: '第' + r.groupOrder + '组',
                  children: []
                }
                targets.push(group)
              }
              r.nodeId = group.groupOrder + '-' + r.memberOrder
              r.label = '第' + r.memberOrder + '位'
              r.nodeType = 'target'
              group.children.push(r)
            })
            me.targets = targets
          })
        })
      } catch (er) {
        console.log(er)
      }
    },
    handleDragstart (node, event) {
      // console.log('start', node, event)
      this.$refs.tree2.$emit('tree-node-drag-start', event, { node: node })
    },
    handleDragend (draggingNode, endNode, position, event) {
      console.log('endsrc', draggingNode, endNode, position, event)
      this.$refs.tree2.$emit('tree-node-drag-end', event, { draggingNode, endNode, position, event })
    },
    handleVirStat (node, event) {
      console.log('startTarget', node, event)
    },
    handleVirDragend (srcNode, targetNode, position, event) {
      var me = this
      try {
        console.log('endTarget', srcNode, targetNode, position, event)
        var flag = srcNode && targetNode && srcNode.data && targetNode.data && srcNode.data.nodeType == 'src' && targetNode.data.nodeType == 'target'
        if (flag) {
          console.log(srcNode.data)
          console.log(targetNode.data)
          var ps = {
            solutionId: srcNode.data.solutionId,
            preGroup: srcNode.data.preGroup,
            preRank: srcNode.data.preRank,
            groupOrder: targetNode.data.groupOrder,
            memberOrder: targetNode.data.memberOrder
          }
          var key = 'against/setSolutionItem'
          me.sys.query(key, ps).then(res => {
            console.log(res)
            me.refreshItems(me.currentSolutionId)
          })
        } else {
          me.refreshItems(me.currentSolutionId)
        }
      } catch (er) {
        console.log(er)
      }
    },
    allowDrop (draggingNode, dropNode, type) {
      return 1 > 0
    },
    allowDrag (draggingNode) {
      return 1 > 0
    }
  }
}
</script>

<style lang="less" scoped>
    .agianst{
        height: 100%;
        .header{
            position: fixed;
            width: 100%;
            padding: 15px;
            box-shadow: 2px 2px 2px #999;
            .title{
                font-weight: bold;
            }
            background-color: #fff;
            z-index: 999;
        }
        .leftPan{
            position: fixed;
            width: 400px;
            background-color: #fff;
            height: 100%;
            z-index: 990;
            padding-top: 50px;
            display: flex;
            flex-direction: column;

            .solutionAcs{
                background-color: #999;
                padding: 15px;
            }
            .lstSolutions{
                flex: 1;
                overflow-x: hidden;
                overflow-y: scroll;
                .solution{
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 10px;
                    border-bottom: 1px solid #ddd;
                    .info{
                        .title{
                            font-weight: bold;
                        }
                    }
                }
            }
        }
        .main{
            height: 100%;
            padding-left: 400px;
            padding-top: 50px;
            .page{
                width: 100%;
                height: 100%;
                padding: 15px;
                display: flex;
                .panFrom{
                    width: 280px;
                }
                .panTo{
                    flex: 1;
                    padding-left: 15px;
                }
                .graphContainer{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }

    .custom-tree-node{
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 10px;
    }
</style>
